<div class="form-group">
    <label class="col-form-label">Variables</label>

    <div id="variable-form">
        <div class="form-row" id="variable-form-1_{{key}}">
            <div class="form-group col-md-4">
                <input id="variable-form-1-name_{{key}}" type="text" class="form-control" placeholder="name">
            </div>
            <div class="form-group col-md-7">
                <input id="variable-form-1-value_{{key}}" type="text" class="form-control" placeholder="value (JSON)">
            </div>
            <div class="form-group col-md-1">
                <button id="variable-form-1-button_{{key}}" class="btn btn-outline-primary"
                        onclick="showVariableForm(2)">+
                </button>
            </div>
        </div>
        <div class="form-row d-none" id="variable-form-2_{{key}}">
            <div class="form-group col-md-4">
                <input id="variable-form-2-name_{{key}}" type="text" class="form-control" placeholder="name">
            </div>
            <div class="form-group col-md-7">
                <input id="variable-form-2-value_{{key}}" type="text" class="form-control" placeholder="value (JSON)">
            </div>
            <div class="form-group col-md-1">
                <button id="variable-form-2-button_{{key}}" class="btn btn-outline-primary"
                        onclick="showVariableForm(3)">+
                </button>
            </div>
        </div>
        <div class="form-row d-none" id="variable-form-3_{{key}}">
            <div class="form-group col-md-4">
                <input id="variable-form-3-name_{{key}}" type="text" class="form-control" placeholder="name">
            </div>
            <div class="form-group col-md-7">
                <input id="variable-form-3-value_{{key}}" type="text" class="form-control" placeholder="value (JSON)">
            </div>
            <div class="form-group col-md-1">
                <button id="variable-form-3-button_{{key}}" class="btn btn-outline-primary"
                        onclick="showVariableForm(4)">+
                </button>
            </div>
        </div>
        <div class="form-row d-none" id="variable-form-4_{{key}}">
            <div class="form-group col-md-4">
                <input id="variable-form-4-name_{{key}}" type="text" class="form-control" placeholder="name">
            </div>
            <div class="form-group col-md-7">
                <input id="variable-form-4-value_{{key}}" type="text" class="form-control" placeholder="value (JSON)">
            </div>
            <div class="form-group col-md-1">
                <button id="variable-form-4-button_{{key}}" class="btn btn-outline-primary"
                        onclick="showVariableForm(5)">+
                </button>
            </div>
        </div>
        <div class="form-row d-none" id="variable-form-5_{{key}}">
            <div class="form-group col-md-4">
                <input id="variable-form-5-name_{{key}}" type="text" class="form-control" placeholder="name">
            </div>
            <div class="form-group col-md-7">
                <input id="variable-form-5-value_{{key}}" type="text" class="form-control" placeholder="value (JSON)">
            </div>
            <div class="form-group col-md-1">
                <button id="variable-form-5-button_{{key}}" class="btn btn-outline-primary"
                        onclick="showVariableForm(6)">+
                </button>
            </div>
        </div>
        <div class="form-row d-none" id="variable-form-6_{{key}}">
            <div class="form-group col-md-4">
                <input id="variable-form-6-name_{{key}}" type="text" class="form-control" placeholder="name">
            </div>
            <div class="form-group col-md-7">
                <input id="variable-form-6-value_{{key}}" type="text" class="form-control" placeholder="value (JSON)">
            </div>
            <div class="form-group col-md-1">
                <button id="variable-form-6-button_{{key}}" class="btn btn-outline-primary"
                        onclick="showVariableForm(7)">+
                </button>
            </div>
        </div>
        <div class="form-row d-none" id="variable-form-7_{{key}}">
            <div class="form-group col-md-4">
                <input id="variable-form-7-name_{{key}}" type="text" class="form-control" placeholder="name">
            </div>
            <div class="form-group col-md-7">
                <input id="variable-form-7-value_{{key}}" type="text" class="form-control" placeholder="value (JSON)">
            </div>
            <div class="form-group col-md-1">
                <button id="variable-form-7-button_{{key}}" class="btn btn-outline-primary"
                        onclick="showVariableForm(8)">+
                </button>
            </div>
        </div>
        <div class="form-row d-none" id="variable-form-8_{{key}}">
            <div class="form-group col-md-4">
                <input id="variable-form-8-name_{{key}}" type="text" class="form-control" placeholder="name">
            </div>
            <div class="form-group col-md-7">
                <input id="variable-form-8-value_{{key}}" type="text" class="form-control" placeholder="value (JSON)">
            </div>
            <div class="form-group col-md-1">
                <button id="variable-form-8-button_{{key}}" class="btn btn-outline-primary"
                        onclick="showVariableForm(9)">+
                </button>
            </div>
        </div>
        <div class="form-row d-none" id="variable-form-9_{{key}}">
            <div class="form-group col-md-4">
                <input id="variable-form-9-name_{{key}}" type="text" class="form-control" placeholder="name">
            </div>
            <div class="form-group col-md-7">
                <input id="variable-form-9-value_{{key}}" type="text" class="form-control" placeholder="value (JSON)">
            </div>
            <div class="form-group col-md-1">
                <button id="variable-form-9-button_{{key}}" class="btn btn-outline-primary"
                        onclick="showVariableForm(10)">+
                </button>
            </div>
        </div>
        <div class="form-row d-none" id="variable-form-10_{{key}}">
            <div class="form-group col-md-4">
                <input id="variable-form-10-name_{{key}}" type="text" class="form-control" placeholder="name">
            </div>
            <div class="form-group col-md-7">
                <input id="variable-form-10-value_{{key}}" type="text" class="form-control" placeholder="value (JSON)">
            </div>
            <div class="form-group col-md-1">
                <button id="variable-form-10-button_{{key}}" class="btn btn-outline-primary"
                        onclick="showVariableForm(11)"
                        disabled>+
                </button>
            </div>
        </div>
    </div>
</div>

<script>

    function showVariableForm(index) {
        var varForm = document.getElementById('variable-form-' + index + '_{{key}}');
        varForm.classList.remove("d-none");
    }

    function getVariablesDocument(key) {
        var formCount = 10;
        var variableCount = 0;
        var variableDocument = '{';

        var i;
        for (i = 1; i <= formCount; i++) {
          var varName = document.getElementById('variable-form-' + i + '-name_' + key).value;
          var varValue = document.getElementById('variable-form-' + i + '-value_' + key).value;

          if (varValue.length == 0) {
            varValue = null;
          }

          if (varName.length > 0) {
            if (variableCount > 0) {
                variableDocument += ',';
            }
            variableDocument += '"' + varName + '":' + varValue;
            variableCount += 1;
          }
        }

        variableDocument += '}';

        return variableDocument;
    }


</script>